<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="../mdui/css/mdui.min.css" />
  <link rel="stylesheet" href="../css/page.css" />
  <title>WaddleOj - Hello,World! 0001</title>
  <script src="../src-min/ace.js"></script>
</head>

<body class="mdui-theme-layout-dark mdui-drawer-body-left">
  <div class="mdui-drawer" id="drawer"></div>
  <script></script>
  <div class="mdui-toolbar mdui-color-theme">
    <a
      href="javascript:;"
      class="mdui-btn mdui-btn-icon"
      onclick="page_drawer_toggle()"
    >
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <span class="mdui-typo-title">WaddleOj</span>
  </div>
  <div style="padding: 20px" id="jg">
    <h1 id="ing">评测中...</h1>
    <div
      class="test-case"
      style="background: rgb(82, 196, 26); display: none"
      id="tc"
      onclick='window.location="https://www.bilibili.com/video/BV1GJ411x7h7"'
    >
      <div class="content">
        <div class="info">19ms/3.37MB</div>
        <div class="status">NGGYU</div>
      </div>
      <div class="id">#1</div>
    </div>
  </div>
  <script>
    setTimeout(function () {
      document.getElementById("ing").style.display = "none";
      document.getElementById("tc").style.display = "block";
    }, 1000);
  </script>
  <style>
    body {
      overflow-x: hidden;
    }
    .test-case {
      position: relative;
      vertical-align: top;
      cursor: pointer;
      margin: 0.2em;
      height: 6em;
      width: 6em;
      padding: 0;
      color: #fff;
    }
    .content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
    }
    .content > div {
      padding-top: 2px;
      padding-bottom: 2px;
    }
    .info + .status {
      font-size: 1.25em;
    }
    .status {
      font-size: 0.5em;
      text-align: center;
      font-weight: normal;
    }
    .id {
      position: absolute;
      top: 0;
      left: 0;
      padding: 6px;
      font-size: 0.65em;
    }
  </style>
  <script src="../mdui/js/mdui.min.js"></script>
  <script>
    page_drawer_load = () => {
      //加载抽屉导航
      html = `<ul class="mdui-list">
    <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
        <div class="mdui-list-item-content">首页</div>
    </li>
    <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons">book</i>
        <div class="mdui-list-item-content">题目</div>
    </li>
    <li class="mdui-subheader">关于</li>
    <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons">more_vert</i>
        <div class="mdui-list-item-content">还没做呢！</div>
    </li>
</ul>`;
      document.getElementById("drawer").innerHTML = html;
    };

    page_drawer_load();

    page_drawer_toggle = () => {
      //打开/切换
      new mdui.Drawer("#drawer").toggle();
    };

    page_sign = () => {
      //首页图
      let time = ` 今天${
        new Date().getMonth() + 1
      }月${new Date().getDate()}日 `;
      let colors = [
        "#ae3ec9",
        "#e03131",
        "#5f3dc4",
        "#3b5bdb",
        "#1971c2",
        "#099268",
        "#66a80f",
        "#e8590c",
        "#f08c00",
      ];
      let color = colors[new Date().getDate() % colors.length];
      if (document.getElementsByClassName("page_sign") != []) {
        //在首页，有首图
        document.getElementsByClassName("page_sign")[0].style.backgroundColor =
          color;
        document
          .getElementsByClassName("page_sign")[0]
          .getElementsByTagName("h3")[0].innerText = time;
      }
    };

    page_sign();
  </script>
</body>
